<template>
  <div id="app3">
    <header class="header">
      <div class="title">
        <img
          src="../../assets/images/01_11.png"
          alt
          class="img_zuo"
          @click="back"
        />
        <div>监督检查计划</div>
      </div>
    </header>
    <div class="luo">
      <div class="mains">
        <div class="main">
          <div class="titles">
            <div class="danwei">
              <div class="danweiimg">
                <img src="../../assets/images/tabbar_home_active.png" alt="" />
              </div>
              <div>{{ luoshi.dwname }}</div>
            </div>
            <div class="time">
              <div class="timeimg">
                <img src="../../assets/images/times.png" alt="" />
              </div>
              <div>{{luoshi.addTime }}</div>
            </div>
            <div class="name">
              <div class="nameimg">
                <img src="../../assets/images/name.png" alt="" />
              </div>
              <div class="nametext">{{luoshi.username }}</div>
            </div>
          </div>
           <div class="text" v-if="luoshi.type !== null && luoshi.type !== ''">
            <div class="texttile">对象:</div>
            <div class="textwb">{{ luoshi.type }}</div>
          </div>
          <div class="text" v-if="luoshi.content !== null && luoshi.content !== ''">
            <div class="texttile">内容:</div>
            <div class="textwb">{{luoshi.content }}</div>
          </div>
           <div
            class="text"
            v-if="luoshi.img.length !== 0 || luoshi.img.length !== 0"
          >
            <div class="texttile">附件:</div>
            <div class="fujian lists1">
           
              <ul class="lists imgs_ul">
                <li
                  class="img-box"
                  v-for="(v, index) of luoshi.img"
                  :keys="index"
                >
                  <div class="img-box-item">
                    <img :src="showUrl + v.path" alt="" class="imgs" />
                  </div>
                </li>
              </ul>
             
            </div>
          </div> 
            <div class="text">
           <div
                class="textdocx"
                v-for="(v, index) of luoshi.file"
                :keys="index"
              >
                <div class="textdocfj" @click="downloadFileClick(v)">
                  {{ v.remark}}
                </div>
              </div>
              </div>
        </div>
      </div>

       <!-- <div>
       <van-list v-model="loading" :finished="finished" @load="onLoad">
          <div
            class="list"
            v-for="(v, index) of guanlian"
            :keys="index"
            @click="btn(v.id, v.type, v.ptId, v.infoId)"
          >
            <div class="liebiao">
              <div class="liebiaoimg">
                <img
                  src="../../assets/images/logo5.png"
                  alt=""
                  v-if="v.structureID == 14"
                />
                <img
                  src="../../assets/images/yanpan.png"
                  alt=""
                  v-if="v.type == '风险研判'"
                />
                <img
                  src="../../assets/images/bushu.png"
                  alt=""
                  v-if="v.type == '安排部署'"
                />
                <img
                  src="../../assets/images/peixun.png"
                  alt=""
                  v-if="v.type == '安全培训'"
                />
                <img
                  src="../../assets/images/tuiyan.png"
                  alt=""
                  v-if="v.type == '桌面推演'"
                />
                <img
                  src="../../assets/images/yanlian.png"
                  alt=""
                  v-if="v.type == '实战演练'"
                />
                <img
                  src="../../assets/images/yuetan.png"
                  alt=""
                  v-if="v.type == '警示约谈'"
                />
                <img
                  src="../../assets/images/xietiao.png"
                  alt=""
                  v-if="v.type == '隐患协调'"
                />
                <img
                  src="../../assets/images/xianchang.png"
                  alt=""
                  v-if="v.type == '现场安全宣传'"
                />
                <img
                  src="../../assets/images/ruhu.png"
                  alt=""
                  v-if="v.type == '入户安全宣传'"
                />
                <img
                  src="../../assets/images/wangluo.png"
                  alt=""
                  v-if="v.type == '网络安全宣传'"
                />
                <img
                  src="../../assets/images/wangluo.png"
                  alt=""
                  v-if="v.type == '报刊宣传'"
                />
              </div>
              <div class="liebiaotitle">
                <div class="liet">
                  [{{ v.type }}]{{ v.content | handleText }}
                </div>

                <div class="liewb">
                  <img
                    src="../../assets/images/jsd.gif"
                    alt=""
                    class="opp"
                    v-if="
                      (v.isok == -1 && v.yhlb == 1) ||
                      (v.isok == 1 && v.yhlb == 100) ||
                      (v.isok == 1 && v.yhlb == 102) ||
                      (v.isok == -1 && v.yhlb == 99 && v.status == 0)
                    "
                  />
                  <img
                    src="../../assets/images/lg.png"
                    alt=""
                    class="opp"
                    v-if="
                      (v.isok == 1 && v.yhlb == 101) ||
                      (v.isok == -1 && v.yhlb == 99 && v.status > 0)
                    "
                  />

                  <div class="liewbimg">
                    <img src="../../assets/images/r_h.png" alt="" />
                  </div>
                  <div class="liewbname">{{ v.userName }}</div>
                </div>
              </div>
              <div class="liebiaotime">{{ v.addTime }}</div>
            </div>
          </div>
        </van-list> 
      </div>-->
    </div>
  </div>
</template>
<script>
import { Toast, Calendar } from "vant";
import Tabbar from "../tabbar.vue";
import utils from "../../assets/js/utils.js";
export default {
  components: {
    Tabbar,
  },

  filters: {
    handleText(value) {
      if (!value) return "";
      if (value.length > 7) {
        return value.slice(0, 7) + "...";
      }
      return value;
    },
  },
  data() {
    return {
      liebiaoid: "",
      a: [],
      dwid: "",
      luoshi:"",
      count: 1,
      guanlian: [],
      showUrl: "",
       query: null,
      loading: false,
      refreshing: false, //是否下拉加载 是true

      finished: false,
    };
  },
//    beforeRouteLeave(to, from, next) {
//     //设置路由的 meta
//     console.log(to);
//      next();
//     
   
//   },
//   beforeRouteEnter(to, from, next) {
//     next((vm) => {
//       console.log("这是管理guanlian", vm.guanlian.length);
//       vm.liebiaoid = localStorage.getItem("logid");

//       if (from.path == "/snxd_detail") {
//         console.log(from.path);
//         console.log("这是list", vm.guanlian);
//         if (vm.guanlian.length > 0) {
//           sessionStorage.setItem("guanlian", 1);
//         }
//       } else if (
//         from.path == "/xcbs_detail" ||
//         from.path == "/ptlook" ||
//         from.path == "/hard_detail"
//       ) {
//         console.log("detail");
//         sessionStorage.setItem("guanlian", 2);
//       }
//       var dd = sessionStorage.getItem("guanlian");
//       if (dd == 1) {
//         console.log("走第一步");
//         vm.onRefresh();
//         vm.list();
//       } else if (dd == 2) {
//         vm.scrollTop();
//         console.log("走第二步");
//       }
//     });
//   },

  methods: {
    back() {
      //返回
      this.$router.back();
    },
    downloadFileClick(v) {
      var path = this.showUrl + v.path;
      var info = utils.getFileInfo(path);
      console.log(info);
      var flag = this.checkFjType(info);
      if (path && info.name && info.type && info.fileExtension && flag) {
        try {
          var filename = new Date().getTime() + info.fileExtension;
          var waitingObj = plus.nativeUI.showWaiting("正在打开");
          var dtask = plus.downloader.createDownload(
            path,
            { filename: "_downloads/" + filename },
            function (d, status) {
              waitingObj.close();
              // 下载完成
              if (status == 200) {
                plus.runtime.openFile("_downloads/" + filename);
              } else {
                console.log("Download failed: " + status);
              }
            }
          );
          dtask.addEventListener("statechanged", function (task, status) {
            if (!dtask) {
              return;
            }
            switch (task.state) {
              case 1:
                waitingObj.setTitle("正在打开");
                break;
              case 2:
                waitingObj.setTitle("正在打开");
                break;
              case 3: // 已接收到数据
                var progressVal = (task.downloadedSize / task.totalSize) * 100;
                //psb1.progressbar({ progress: progressVal }).show();
                //dstatus[0].innerHTML = task.downloadedSize + '/' + task.totalSize;
                //hui.toast('下载进度：' + (task.downloadedSize + '/' + task.totalSize));
                var progressStr = Number.parseInt(progressVal) + "% ";
                console.log(progressStr);
                waitingObj.setTitle(progressStr);
                break;
              case 4:
                dtask = null;
                waitingObj.setTitle("0%");
                break;
            }
          });
          dtask.start();
        } catch (e) {
          console.log(e.message);
        }
      }
      //     console.log(v);
      // 　　//在本页打开窗口
      //     let $eleForm = $("<form method='get'></form>");
      //     $eleForm.attr("action",this.showUrl+v.path);
      //     $(document.body).append($eleForm);
      //     //提交表单，实现下载
      //     $eleForm.submit();
    },
    checkFjType(info) {
      var arr = [
        "png",
        "jpg",
        "jpeg",
        "bmp",
        "gif",
        "webp",
        "psd",
        "svg",
        "tiff",
        "txt",
        "pdf",
        "doc",
        "docx",
        "xls",
        "xlsx",
        "pptx",
      ];
      var flag = false;
      if (info && info.type) {
        flag = arr.indexOf(info.type.toLowerCase()) !== -1;
      }
      return flag;
    },

    // liebiao
    list() {
      this.axios
        .get(
          `${this.$global_msg.Url.host}/monitoringPlan/luoshiDec?id=${this.liebiaoid}`
        )
        .then((res) => {
          console.log("清单落实列表", res);
           this.luoshi = res.data.rows;
          // this.a = this.a.concat(res.data.rows);
          // console.log(this.a);
        });
    },
    // btn(id, type, ptId, infoId) {
    //   localStorage.setItem("list_scrollTops", $(".luo").scrollTop());
    //   console.log(id);
    //   var kfc = {
    //     id: ptId,
    //   };
    //   if (id) {
    //     sessionStorage.setItem("todetail", JSON.stringify(kfc));
    //     if (
    //       type == "风险研判" ||
    //       type == "安排部署" ||
    //       type == "安全培训" ||
    //       type == "桌面推演" ||
    //       type == "实战演练" ||
    //       type == "警示约谈" ||
    //       type == "隐患协调" ||
    //       type == "现场安全宣传" ||
    //       type == "入户安全宣传" ||
    //       type == "网络安全宣传" ||
    //       type == "报刊宣传"
    //     ) {
    //       this.$router.push("/xcbs_detail");
    //     } else {
    //       if (ptId !== 0 && ptId !== undefined) {
    //         sessionStorage.setItem("inspection_patrolTroubleshootId", ptId);
    //         sessionStorage.setItem("inspection_infoId", infoId);
    //         this.$router.push("/hard_detail");
    //       } else {
    //         this.$router.push({
    //           path: "/ptlook",
    //           query: { id: id, ids: 14 },
    //         });
    //       }
    //       //    this.$router.push({
    //       //  path: '/hard_detail',
    //       // query: { id:id}

    //       //})
    //     }
    //   }
    // },
  },
  destroyed() {
   setTimeout(() => {
      console.log("484987987979879879879879");
       this.$zoom.showImagesFn.hideContainer();
  });
  },
  mounted() {
    this.query = this.$route.query;
    console.log( this.query)
    this.liebiaoid =this.query.id
    this.showUrl = this.$global_msg.Url.host + "";
  this.list();
  },
  created(){

  }
};
</script>
<style scoped>
#app3 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  background: #ddd;
}
.header {
  height: 1.8519rem;
  background: #007aff;
  padding-top: 0.8333rem;
  box-sizing: border-box;
  z-index: 20;
  font-size: 0.388888rem;
}

.title {
  padding: 0 0.3704rem;
  display: flex;
  align-items: center;
  color: #fff;
}

.title > div {
  width: 100%;
  font-size: 0.4444rem;
  text-align: center;
}

.img_zuo {
  width: 0.2593rem;
  height: 0.463rem;
}
.btn-add {
  position: absolute;
  right: 0.37037rem;
  font-size: 0.388888rem;
  bottom: 0.462962rem;
}

/* 正文 */
.luo {
  overflow-y: auto;
  padding-bottom: 2rem;
  flex: 1;
}
.mains {
  overflow-y: auto;
}
.main {
  background: #fff;
  border-radius: 0.198148rem;
  margin-top: 0.2rem;
}
.titles {
  width: 96%;
  margin: 0 auto;
  display: flex;
  padding-top: 0.3rem;
  border-bottom: 0.018519rem solid #ddd;
  padding-bottom: 0.3rem;
  justify-content: space-between;
}
.opp {
  width: 6%;
  height: 0.36rem;
  padding-right: 0.18rem;
}
.danwei {
  display: flex;
  justify-content: space-evenly;

  color: black;
  font: 600;
  width: 33%;
}
.time {
  display: flex;
  justify-content: space-evenly;
  margin-top: 0.2em;
  color: black;
  font: 600;
  width: 33%;
}
.name {
  display: flex;
  justify-content: space-between;

  color: black;
  font: 600;
  width: 20%;
}

.danweiimg {
  width: 15%;
  margin-top: 3px;
}
.danweiimg img {
  width: 100%;
}
.timeimg {
  width: 13%;
}
.timeimg img {
  width: 100%;
}
.nameimg {
  width: 18%;
  margin-top: 0.1rem;
}
.nameimg img {
  width: 100%;
}
.nametext {
  width: 80%;
}
.text {
  width: 96%;
  margin: 0 auto;
  display: flex;
  font-size: 0.4rem;
  padding-bottom: 0.2rem;
}
.texttile {
  width: 11%;
}
.textwb {
  width: 89%;
  color: #7b7b7b;
}
.textimg {
  width: 100%;
  display: flex;
  flex-flow: wrap;
}

.textimg img {
  width: 50%;
}
.textdocx {
  width: 100%;
  padding-bottom: 0.2rem;
  color: #7b7b7b;
}
.textdocfj {
  width: 100%;
  word-break: break-all;
}
.fujian {
  width: 85%;
}
.lists {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.lists1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: 1px solid #f2f2f2;
}
.lists1:first-child {
  border-bottom: none;
}
.img-box {
  width: 3.381481rem;
  /* height: 2.814814rem; */
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
  display: flex;

  border-radius: 30px;
  margin-top: 0.2rem;
  flex-wrap: wrap;
}
.imgs_ul {
  padding: 0 0.4rem;
  width: 100%;
  padding-bottom: 0.2rem;
}
.imgs {
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 11;
}
.img-box-item {
  width: 3.381481rem;
  height: 2.814814rem;
  border: 1px #f2f2f2 solid;
  border-radius: 0.277778rem;
}
/* liebiao */
.list {
  width: 100%;
  background: #fff;
  border-radius: 0.198148rem;
  margin-top: 0.2rem;
}
.liebiao {
  width: 94%;
  margin: auto;
  display: flex;
  padding-bottom: 0.2rem;
  padding-top: 0.2rem;
  justify-content: space-between;
}
.liebiaoimg {
  width: 11%;
}
.liebiaoimg img {
  width: 87%;
  margin-top: 0.1296rem;
}
.liebiaotitle {
  width: 75%;
}
.liet {
  width: 100%;
  font-size: 0.42rem;
  padding-bottom: 0.1rem;
}
.liewb {
  width: 100%;
  display: flex;
}
.liewbimg {
  width: 4%;
  margin-top: 0.14rem;
}
.liewbimg img {
  width: 100%;
}
.liewbname {
  color: #7b7b7b;
  font-size: 0.33rem;
  margin-left: 0.2rem;
}
.liebiaotime {
  width: 17%;
  text-align: center;
  line-height: 3;
}
</style>